<template>
	<div class="stock">
		<back :title="title"></back>
		<!--<changeshop v-show="isShopShow" @close="close" @chooseShop="chooseShop"></changeshop>
		<input type="text" v-model="shopName" placeholder="选择店铺查询" class="chooseShop" @click="Shop" readonly />-->
	    <body class="body">
	    	<p class="tips" v-show="isShow">暂时还没有库存哦~</p>
	    	<div class="productlist" v-for="(item,index) in list">
	    		<!--<p class="shopname">{{item.shopName}}</p>-->
	    		<div class="shopList">
	    			<div class="left">
	    				<img :src="item.thumbnail" />
	    			</div>
	    			<div class="right">
	    				<p class="productname">{{item.productName}}</p>
	    				<p><span>总数量：</span><span>{{item.totalCount}}</span></p>
	    				<p><span>在库数量：</span><span>{{item.usableCount}}</span></p>
	    				<p><span>在租数量：</span><span>{{item.rentingCount}}</span></p>
	    				<p><span>待消毒数量：</span><span>{{item.waitForDisinfectCount}}</span></p>
	    				<!--<p class="shortDesc">{{item.shortDesc}}</p>-->
	    			</div>
	    		</div>
	    	</div>
	    </body>
	</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'
import changeshop from '@/components/m-shop/m-store/changeshop'

export default {
	name:'stock',
	components: {
		back,
		changeshop
	},
	data () {
		return {
			title: '库存信息',
			isShopShow:false,
			shopName:'根据店铺查询',
			shopid:'',
			id:'',
			list:[],
			isShow:false
		}
	},
	created () {
		 this.getStockInfoList()
	},
	mounted () {   
	},
	methods:{
		getStockInfoList() {
			this.$http.get(this.$store.state.reqUrl + this.$route.query.shop_url, {
				params: {
					shopId: this.$store.state.shop_id
				}
			}).then(res => {
				if(res.data.list.length === 0) {
					this.isShow = true
					this.list = []
				}else{
					this.list = res.data.list;
				}
			})
		},
		//选择店铺
		Shop () {
			this.isShopShow = true;
		},
		chooseShop (item) {
			this.shopName = item.shopName;
			this.shopid = item.id;
		},
		//关闭模态框
		close (parame) {
			this.isShopShow = parame;
		},
	}
	/*watch:{
		shopid () {
			this.getStockList()
		}
	}*/
}
</script>
<style lang="less" scoped>
    .stock{
    	margin-top: 100px;
    	.chooseShop{
    		margin-bottom:25px;
    		height: 80px;
    		width:100%;
    		background: #FFFFFF;
    		font-size: 28px;
    		text-align: center;
    		line-height:80px;
    	}
    	.body{
    		width:100%;
    		.tips{
		   	    font-size: 34px;
			 	color: darkgray;
			 	text-align: center;
			 	margin-top: 50%;
		   }
    		.productlist{
    			width:100%;
    			margin-bottom: 15px;
    			background: #FFFFFF;
    		/*	.shopname{
    				padding:10px 30px 0px 0;
    				text-align: right;
    				font-size: 26px;
    			}*/
    			.shopList{
    				padding:20px 20px 20px 20px;
    				display: flex;
    				.left{
    					width:250px;
    					height:200px;
    				    img{
    				    	width:100%;
    				    	height: 100%;
    				    	border-radius: 8px;
    				    }
    				}
    				.right{
    					flex: 1;
    					font-size: 26px;
    					margin-left: 20px;
    					.productname{
    						font-size: 30px;
    						color: #000000;
    						margin-bottom: 20px;
    						font-weight: 800;
    					}
    					.shortDesc{
    						line-height: 30px;
    					}
    				}
    			}
    		}
    	}
    }
</style>